
<div class="swiper-viewport module-slideshow" style="height:{{ slide_show_height[module] }}">
	<div id="slideshow{{ module }}_swiper" class="swiper-container">
		<div class="swiper-wrapper">
			{% for banner in banners %}
				<div class="swiper-slide text-center">
					{% if banner.link %}
						<a href="{{ banner.link }}">
							<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />
						</a>
					{% else %}
						<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />
					{% endif %}</div>
			{% endfor %}
		</div>
	</div>
	<div class="swiper-pagination slideshow-pagination-{{ module }}"></div>
	<div class="swiper-pager">
		<div class="swiper-button-next slideshow-next{{ module }}"></div>
		<div class="swiper-button-prev slideshow-prev{{ module }}"></div>
	</div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        var slideshow{{ module }}_swiper = new Swiper('#slideshow{{ module }}_swiper', {
            slidesPerView: 1,
            pagination: {
                el: '.slideshow-pagination-{{ module }}',
                type: 'bullets',
                clickable :true,
			},
            navigation: {
                nextEl: '.slideshow-next{{ module }}',
                prevEl: '.slideshow-prev{{ module }}',
            },
            autoplay: {
                delay: 3000,
                disableOnInteraction: false
            },
            loop: true
        });

        $('.module-slideshow').hover(function() {
            slideshow{{ module }}_swiper.autoplay.stop();
        }, function() {
            slideshow{{ module }}_swiper.autoplay.start();
        });
    });

</script>

